<!DOCTYPE html>
<html>
<head>
	<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">

</head>

<body>
<div class="container-fluid">
    	<button class="btn btn-default"><i class="icon-search"></i>Default</button>
    	<button class="btn btn-primary">Primary</button>
    	<button class="btn btn-info">Info</button>
    	<button class="btn btn-success">Success</button>
    	<button class="btn btn-warning">Warning</button>
    	<button class="btn btn-danger">Danger</button>
    	<button class="btn btn-link">Link</button>
    	<button class="btn btn-default btn-lg">Default large</button>
    	<button class="btn btn-success btn-sm">Default small</button>
    	<button class="btn btn-success btn-xs ">Default xsmall</button>
</div>
	<br/>

<button type="button" class="btn btn-info btn-block">Button block</button>
	<br/>



<ul class="nav nav-tabs">
	<li class="active"><a href="#demo1-tab" data-toggle="tab">TAB1<i class=""></i></a></li>
	<li><a href="#demo2-tab" data-toggle="tab">TAB2<i class=""></i></a></li>
</ul>
<form action="" class="form-horizontal">
<div class="tab-content">
<div class="tab-pane active" id="demo1-tab">

<h2>Chon mon hoc:</h2>
	<div id="themvao" class="form-group">
		<div class="col-sm-5"> <input type="text" id="textchon" class="form-control"></div>
		<input type="button" onclick="chon()" class="btn btn-primary" value="Chon">	
		<input type="button" onclick="xoa()" class="btn btn-warning" value="Xoa">
		<br>
		<input class="col-sm-1" type="checkbox" name="mon" value="toan">Toan<br>
		<input class="col-sm-1" type="checkbox" name="mon" value="van">Van<br>
		<input class="col-sm-1" type="checkbox" name="mon" value="ly">Ly<br>
		<input class="col-sm-1" type="checkbox" name="mon" value="hoa">Hoa<br>
		<input class="col-sm-1" type="checkbox" name="mon" value="anh">Anh<br>		
	</div>
</div>

<div class="tab-pane" id="demo2-tab">
<h2>Them mon hoc:</h2>
	<div class="form-group">
		<div class="col-sm-5"> <input id="textthemmon" type="text" class="form-control" placeholder="Mon hoc can them"></div>
		<input type ="button" onclick="themmon()" class="btn btn-primary" value="Them mon">
	</div>
<h2>Xoa mon hoc:</h2>
	<div class="form-group">
		<div class="col-sm-5"> <input id="textxoamon" type="text" class="form-control" placeholder="Mon hoc can xoa"></div>
		<input type ="button" onclick="xoamon()" class="btn btn-danger" value="Xoa mon">
	</div>
<input type ="button" class="btn btn-success" value="Cap nhat">
</div>
</div>
</form>
<br/>


<script>
function chon() {
    	var mon = document.forms[0].mon;
    	var txt = "";
    	var i;
	
	var count=0;

    	for (i = 0; i < mon.length; i++) {
        	if (mon[i].checked) {
            		txt = txt + mon[i].value + " ";
			count++;
        	}	
    	}
	if (count >=3)
	{
		alert("Ban vua chon "+ count + " mon:" + txt);
    		document.getElementById("textchon").value = txt;
	}
	else
	{
		alert("Chon it nhat 3 mon");
	}
}


function xoa(){
	var mon = document.forms[0].mon;
	for (i = 0; i < mon.length; i++) {
		if (mon[i].checked) {
		mon[i].checked = false;
		}
	}
	document.getElementById("textchon").value = "";
}
function themmon(){
    	var checkbox = document.createElement("INPUT");
	var tenmon = document.getElementById("textthemmon").value;
	
	checkbox.className = "col-sm-1";
	checkbox.type = "checkbox";
	checkbox.value = tenmon;
	checkbox.name = "mon";

	var div = document.createElement("DIV");
	alert(tenmon);
	div.id = tenmon;
	div.appendChild(document.createTextNode(tenmon));

    	document.getElementById("themvao").appendChild(checkbox);
	document.getElementById("themvao").appendChild(div);
	alert("Da them mon:" + tenmon);
}
function xoamon()
{
	var tenmonxoa = document.getElementById("textxoamon").value;
	var checkbox = document.getElementsByName("mon");
	var div = document.getElementById(tenmonxoa);
	for (var i=0;i<checkbox.length; i++){
		if (checkbox[i].value.toLowerCase() == tenmonxoa.toLowerCase())
		{
			namecheckbox = checkbox[i];
			document.getElementById("themvao").removeChild(namecheckbox);
			document.getElementById("themvao").removeChild(div);
			alert("Xoa thanh cong");
		}
		else {
		//alert("Khong co mon hoc de xoa");
		}
	}
}
</script>




    	
	<button id="testbtn" class="btn btn-primary"> Test</button>
    	<button type="buton" onclick="disabledbtn()" class="btn btn-default btn-lg">active Default btn</button>
	<button type="buton" onclick="undisabledbtn()" class="btn btn-default">Disabled btn</button>	
    	<button type="buton" class="btn btn-default disabled">Disabled Default</button>	
	<br/>
<script>
function undisabledbtn()
{
	document.getElementById("testbtn").disabled = true;
}
function disabledbtn()
{
	document.getElementById("testbtn").disabled = false;
}
</script>
<h2>Button Groups</h2>
<div class="btn-group">
	<button class="btn btn-primary">Hello</button>
	<button class="btn btn-primary">Everybody</button>
	<button class="btn btn-primary">!!!!</button>
</div>
	<br/>
<h2>Button Group Vertical </h2>
<div class="btn-group-vertical">
  	<button class="btn btn-primary">Hello</button>
  	<button class="btn btn-primary">Everybody</button>
  	<button class="btn btn-primary">!!!!</button>

</div>
	<br/>
<h2> Collapse</h2>
<div>
	<button type="button" class="btn btn-primary" data-toggle="collapse" data-target="#showtext">Hello</button>
	
	<div id="showtext" class="collapse">
	Hello everybody!!!!
	Blah,.....Blah,.....Blah,.....Blah,.....Blah,.....Blah,.....
	</div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</body>
</html>